import { defineComponent, watch, ref } from 'vue';
import { useHomeStore } from '@/store'
import { storeToRefs } from 'pinia'

// 定义主体
export default defineComponent({
  setup() {

    const home = useHomeStore();
    home.greenSalesOrderTk();
    const { salesOrderTk } = storeToRefs(home);
    // 定义 ref
    const chartRef = ref()

    // 配置项
    let options ={}

    // 监听
    watch(
      () => salesOrderTk,
      (val: any) => {
        options = {
          tooltip: {
            trigger: "item"
          },
          legend: {
            type: 'scroll',
            data: ['定制售票数', '其他'],
          },
          series: [
            {
              name: '定制占比',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: val.value
            }
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "380px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }
})

